<!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
 
<h1 class="w-sdc-designer-sidebar-section-title" tooltip="Members">Members
    <svg-icon-label *ngIf="!isViewOnly"
                    class="add-members-btn"
                    name="plus-circle-o"
                    mode="primary"
                    size="medium"
                    label="ADD"
                    labelPlacement="right"
                    (click)="openAddMembersModal()">
    </svg-icon-label>
</h1>
<div class="expand-collapse-content">
    <ul>
        <li *ngFor="let member of members; let i = index" class="component-details-panel-large-item"
            tooltip="{{member.name}}">
            <span>{{member.name}}</span>
            <svg-icon-label *ngIf="!isViewOnly"
                            name="trash-o" 
                            clickable="true" 
                            size="small" 
                            class="component-details-panel-item-delete"
                            data-tests-id="delete_member" 
                            (click)="deleteMember(member)"></svg-icon-label>
        </li>
    </ul>

    <div *ngIf="!members || members.length===0" class="component-details-panel-tab-no-data">
        <div class="component-details-panel-tab-no-data-title">No data to display yet</div>
        <div class="component-details-panel-tab-no-data-content">Add members to group to see members</div>
    </div>
</div>
